<template>
  <div>

    <div>
      <vue-particles
          color="#9ee499"
          :particleOpacity="0.9"
          :particlesNumber="120"
          shapeType="circle"
          :particleSize="4"
          linesColor="#9ee499"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
      >
      </vue-particles>
    </div>
 <div  class="learn-home" >
   <div  style="width: 100%;height: 50px;" >
   </div>
  <div class="learn">

    <div style="width: 70%;margin: 20px auto;height: 60px; border-radius: 10px;" >
     <div style="width: 30%; height: 50px;float: left;" > <TaijiCartition  style="float: right;" ></TaijiCartition>  </div>
      <div   style="width: 360px;float: left; height: 43px;margin: 7px auto;">
             <el-input @change="searchItem" v-model="inputMessage" style="margin: 1px auto; display: block; width: 180px;float: left;" type="text" clearable prefix-icon="el-icon-search"  suffix-icon="" ></el-input>
             <el-button  @click="searchItem" type="primary"  style="display: block; float: left;margin: 1px 2px;" >搜索</el-button>
           <el-button  @click="turnOperationType"  style="display: block; float: left;margin: 1px 2px;" >{{currentOperation}}</el-button>
          </div>
    </div>
   <el-divider></el-divider>

   <div class="learn_body" v-if="showType" >
    <transition name="el-zoom-in-center">
    <el-tabs :tab-position="tabPosition" @tab-click="bookContentItem"  style="height: 550px;border-radius: 10px;" type="card" >
    <el-tab-pane label="推背图">

      <div class="book" >
        <div class="detory" >
           <div class="detory_item" v-for="e in bookResList" @click="getBookContent(e)" >
                 {{e['textTitle']}}
           </div>
        </div>
        <div class="content_image" >
             <el-image  :src="currDirectoryUrl"
                        :preview-src-list=" [currDirectoryUrl] "
                        style="width: 100%;height: 95%; border-radius: 10px" >
               <div slot="error" class="image-slot">
                 <i class="el-icon-picture-outline"></i>
               </div>
             </el-image>
        </div>
        <div style="height:30px; " >
          <h4> {{currTitle}} </h4>
        </div>
        <div class="content_item" >
          <div style="margin: 10px;" >
            {{currentContent}}
          </div>

        </div>
      </div>

    </el-tab-pane>
    <el-tab-pane label="穷通宝鉴">
      <div class="book" >
        <div class="detory" >
          <div class="detory_item" v-for="e in bookResList" @click="getBookContent(e)" >
            {{e['textTitle']}}
          </div>
        </div>
        <div class="content_item" >
          {{currentContent}}
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="天滴髓">
      <div class="book" >
        <div class="detory" >
          <div class="detory_item" v-for="e in bookResList" @click="getBookContent(e)" >
            {{e['textTitle']}}
          </div>
        </div>
        <div class="content_item" >
          {{currentContent}}
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="三命通会">
      <div class="book" >
        <div class="detory" >
          <div class="detory_item" v-for="e in bookResList" @click="getBookContent(e)" >
            {{e['textTitle']}}
          </div>
        </div>

        <div class="content_item" >
          {{currentContent}}
        </div>
      </div>
    </el-tab-pane>
     </el-tabs>
  </transition>
  </div>
<!--    <transition name="el-zoom-in-center">-->
   <div  class="search_body" v-if="!showType" >
       <div  class="search_res" >
        <span class="iconfont icon-zj_icon-" >  </span>
        <span>卦象相关</span>
<!--         this.selectDivinatory =    -->
         <div v-for="item in divineResList" style="" @click="getSelectDivinatory(item)" class="search_item" >
           {{item['divinatoryName']}}
         </div>

         <div style="" class="page-tag" >
           <div style="float: left;width: 30px;height: 20px;cursor:pointer;" @click="addSearchPageIndex(false)" > < </div>
           <div style="float: left;width: 30px;height: 20px;cursor:pointer;">{{currentPage}}</div>
           <div  style="float: left;width: 30px;height: 20px;cursor:pointer;" @click="addSearchPageIndex(true)" > > </div>
         </div>
       </div>

     <div class="" style="width: 60%;float: left;height: 80%;  border: #95bdab solid 1px;border-radius: 10px;background-color: rgb(255,255,255);margin: 15px;" >
       <div class="printing">
         <div style="width: 100%;height: 10%;margin: 10px auto" >
           {{selectDivinatory['divinatoryName']}}
         </div>
         <div style="width: 100px;height: 200px;margin: 10px auto; padding-left: 15px; padding-top: 15px; ">
            <yao  v-for="i in selectDivinatory['id']"  :type="i" :size="1.5" ></yao>
         </div>
         <div>

         </div>

       </div>
       <div class="content" >
         {{selectDivinatory['divinatoryExplain']}}
       <div>

       </div>
       </div>
     </div>
   </div>
  </div>

 </div>
 </div>
</template>

<script>
import { get, post } from '@/utils/http';
import TaijiCartition from './taijiCartition.vue';
import Yao from "@/components/yao.vue";


export default {
  name: "LearnPage",
  components: {Yao, TaijiCartition},
  data(){
    return{
      currentPage: 1,
      currDirectoryUrl:'',
      pageSize:9,
      totalPage: 0,
      searchPageList:[],
      searchResIndex:1,
      show: false,
      divineResList:[],
      bookResList:[],
      currTitle:'',
      currentContent:'',
      selectDivinatory:'',
      currentOperation:'古籍',
      bookTitle:[], // 书籍标题或目录
      directory:[],

      showType: true,
      tabPosition: 'left',
      bookTitle1: ['推背图','穷通宝鉴'],
      bookTitle2: ['滴天髓','三命通会'],
      inputMessage:''
    }
  },
  mounted() {
    this.show = !this.show
  },
  methods:{
    toLearnPage(){
      this.$router.push('/learnPage')
    },
    getBookContent(item){
      this.currDirectoryUrl = item['directoryImageUrl']
      this.currTitle = item['textTitle']
       this.currentContent = item['content']
    },

    addSearchPageIndex(flag){
      if(flag === true){
        this.searchResIndex ++;
        this.currentPage = this.searchResIndex
      }else if(this.searchResIndex>=1){
        this.searchResIndex --;
        this.currentPage = this.searchResIndex
      }
      this.searchItem()
    },

    bookContentItem(tab, event){
      console.log(tab['label'])
      get('/contents',{
        name: tab['label']
      }).then(e=>{

        let res = e['data']
        if(res ==null){
          this.$message({
            type: 'info',
            message: '无相关内容'
          })
          return
        }

        this.bookResList = e['data']
        if(  this.bookResList != null &&  this.bookResList.length >0 ){
          this.currTitle = e['data'][0]['textTitle']
          this.currDirectoryUrl = e['data'][0]['directoryImageUrl'];
          this.currentContent = e['data'][0]['content'];
        }else{
          this.currentContent = ""
        }
        console.log(e['data'])
        this.bookResList.forEach(e=>{
          /// 截取字符串
          let s = e['textTitle'].substr(0,4)
          e['textTitle'] =  e['textTitle'].substr(0,4)
          this.bookTitle.push(s)
        })
      }).catch(e=>{

      })
    },
    /**
     * 转换类型
     */
    turnOperationType(){
      this.showType = !this.showType
      if(this.showType){
        this.currentOperation ='古籍'
      }else{
        this.currentOperation = '卦象'
      }
    },


    getSelectDivinatory(e){
      console.log("select --> :"+JSON.stringify(e))
      this.selectDivinatory = e
    },
    /**
     * 搜索
     */
    searchItem(){
      let content = this.inputMessage
      if(content===''||content.length<1){
        return
      }
       post('/search',{
          content: content,
         currentPage: this.searchResIndex,
         pageSize: this.pageSize

       }).then(e=>{
         let res = e['data']
         if(res ==null){
           this.$message({
             type: 'info',
             message: '无相关内容'
           })
           return
         }
        this.bookResList =  e['data']['content']
         this.divineResList = e['data']['divinatoryDetails']
        console.log( e );

       })
    }
  }
}

</script>

<style scoped>
.page-tag{
  margin-left: 95px;
  margin-right: 85px;
  position: absolute;
  bottom: 235px;
}
.printing{
  float: left;
  width: 20%;
  height: 90%;
  margin: 10px;
}
.content{
  text-indent:2em;
  line-height: 30px;
  //letter-spacing:2px;
  float: left;
  width: 70%;
  height: 90%;
  margin: 10px;
  background-color: #ffffff;

  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}


.content_image{
  border-radius: 10px;
  float: left;
  margin: 60px 20px 20px 20px;
  background-color: #f6faf6;
  width: 30%;
  border: 1px solid #abcaa9;
  height: 50%;

}

el-input {
    margin: 2px auto;
    display: block;
    width: 180px;
    float: left;
}
.detory{
  float: left;
  width: 100px;
  height: 98%;
  overflow: auto;
  margin: 5px 3px;
  border: #95bdab solid 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.detory::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

.detory::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  height: 6px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #95bdab;
}
.detory::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background: #ffffff;
}




.content_item{
  text-indent:2em;
  line-height: 30px;
  float: left;
  width: 390px;
  height: 89%;
  overflow: auto;
  margin: 5px 3px;

  border-radius: 5px;
  font-size: 18px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.content_item::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

.content_item::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  height: 6px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #95bdab;
}
.content_item::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background: #ffffff;
}


.detory_item{
  width: 90%;
  height: 50px;
  cursor: pointer;
  margin: 10px auto;
  inset-inline: 50px;
  border: #95bdab solid 1px;
  border-radius: 5px;
}

.book{
   width: 850px;
   margin: 20px auto;
  height: 520px;
  border: #aaf4a5 solid 1px;
  /*background-color: #99a9bf;*/
  backdrop-filter: blur(5px);

  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

}

.search_item{
  width: 50%;
  cursor: pointer;
  height:25px;
  border-radius: 8px;
  background-color: #cbf8c8;
  margin: 3px auto;
}

.search_item:hover{
  color: white;
  transition: 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.search_res{
  float: left;
  width: 30%;height: 80%;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 10px 10px 10px 10px;
  margin: 10px 20px;
}

.search_body{
  width: 90% ;
  font-family: "Britannic Bold", serif;
  height: 60%;
  margin: 0 auto;
  /* background-color: #d6d4d4; */
  border: #95bdab solid 1px;
  border-radius: 10px;
}

.el-tabs__item {
    padding: 0 20px;
    height: 60px;
    box-sizing: border-box;
    line-height: 60px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    position: relative;
}
.learn_body{
  width: 90%;
  height: 70%;
  margin: 10px auto;
  transition: 0.4s;
  /* background-color: #e0e7e0; */
  border-radius: 10px;
  font-family: 'Times New Roman', Times, serif;
}
.title-font{
  font-family:  'Britannic Bold', serif;
}
.title-learn{
  width: 100px;
  height: 50px;

}

.learn-home{

  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
.learn{
  backdrop-filter: blur(3px);
  position: absolute;
  top: 70px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .16), 0 0 6px rgba(0, 0, 0, .12);
  /*border: #95bdab solid 1px;*/
  border: #4c5259 solid 1px;
  margin: 60px 15%;
  width: 1100px;
  height: 700px;
  border-radius: 10px;

  /* display: flex;
  flex-direction: row;
  align-content: center;
  justify-items: center;
  justify-content: center; */

}
.arr{
  font-size: 18px;
  width: 400px;
  height: 200px;

  border-radius: 10px;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;

}

</style>
